<!--
Copyright 2020 The Lighthouse Authors. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
-->

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  <title>Lighthouse Treemap</title>
  <link rel="icon"
    href="">
  <meta name="theme-color" content="#304ffe">
  <link rel="stylesheet" href="styles/bundled.css">
</head>

<body class="vars">
  <div class="drop_zone"></div>

  <div class="treemap-placeholder">
    <div class="treemap-placeholder-inner">
      <div>
        <img src="images/lighthouse-logo.svg" class="treemap-placeholder-logo" alt="Lighthouse logo">
      </div>
      <div>
        <h1 class="treemap-placeholder__heading">Lighthouse Treemap</h1>
        <div class="treemap-placeholder__help">To view a treemap: Paste the Lighthouse result json or a Gist URL.<br>
          You can also drag 'n drop the file or click here to select it.<br><br>
        </div>
        <input type="url" class="treemap-placeholder__url js-gist-url"
               placeholder="Enter or paste Gist URL">
      </div>
    </div>
  </div>

  <div id="lh-log"></div>

  <input id="hidden-file-input" type="file" hidden accept="application/json">

  <main class="hidden lh-main lh-main--show-table">
    <div class="lh-settings">
      <header>
        <div class="lh-header--section">
          <span class="lh-logotitle">
            <!-- Lighthouse logo. Stolen from templates.html -->
            <svg class="lh-topbar__logo" viewBox="0 0 24 24">
              <defs>
                <linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="lh-topbar__logo--a">
                  <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
                  <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
                </linearGradient>
                <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="lh-topbar__logo--b">
                  <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
                  <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
                </linearGradient>
                <linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="lh-topbar__logo--c">
                  <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
                  <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
                </linearGradient>
                <linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="lh-topbar__logo--d">
                  <stop stop-color="#FFF" stop-opacity=".1" offset="0%"/>
                  <stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
                </linearGradient>
              </defs>
              <g fill="none" fill-rule="evenodd">
                <path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/>
                <path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/>
                <path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#lh-topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/>
                <path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/>
                <path fill="url(#lh-topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/>
                <path fill="url(#lh-topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/>
                <path fill="url(#lh-topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/>
              </g>
            </svg>
  
            <span class="lh-header--title lh-text-dim">Lighthouse Treemap</span>
          </span>

          <span class="lh-header__inputs">
            <select class="bundle-selector"></select>
            <button data-i18n="toggleTableButtonLabel" class="lh-button lh-button--active lh-button--toggle-table"></button>
          </span>
        </div>

        <div class="lh-header--section">
          <span class="lh-header--url-and-size">
            <a href="" class="lh-header--url" target="_blank" rel="noopener"></a> <span class="lh-text-dim"></span></span>
          </span>
          <div class="lh-mode-wrapper">
            <div class="lh-modes">
              <!-- View modes go here -->
            </div>
          </div>
        </div>
      </header>
    </div>

    <div class="lh-treemap">
      <!-- treemap goes here -->
    </div>

    <div class="lh-table">
      <!-- table goes here -->
    </div>
  </main>

  <script src="https://www.gstatic.com/firebasejs/4.1.2/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/4.1.2/firebase-auth.js"></script>
  <script src="src/bundled.js"></script>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-16X003MB7V"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-16X003MB7V');
  </script>
</body>

</html>
